<template>
  <Nav>
    {{ $t('nft.nav') }}
  </Nav>
  <div class="page-nft">
    <div class="content">
      <template v-for="item in data.list">
        <div class="box">
          <div class="num">{{ item.num }}</div>
          <div style="overflow: hidden">
            <div class="name">{{ item.area.name }}</div>
            <div class="area wrap">
              <template v-for="(area, key) in item.area_full.split('-')">
                <div v-if="key < 3">{{ area }}</div>
              </template>
            </div>
            <div class="token wrap" v-for="token in item.area_token">{{ token.token }}</div>
          </div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="data.loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
        <md-button v-else-if="data.page <= data.page_max" type="link" icon="arrow-down" @click="get">{{ $t('page.next') }}</md-button>
      </div>
      <div class="box" v-if="!data.loading && data.list.length == 0">
        <span>{{ $t('page.empty') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { list } from '@/api/nft'
import Nav from '@/components/nav.vue'

const data = ref({ 
  page: 1,
  page_max: 1,
  list: [],
  loading: true
})

const get = () => {
  data.value.loading = true
  list(data.value.page).then(res => {
    data.value.list.push(...res.data)
    // 记录页码
    data.value.page = res.meta.pagination.current_page + 1
    data.value.page_max = res.meta.pagination.total_pages
  }).finally(() => {
    data.value.loading = false
  })
}

get()
</script>

<style lang="scss" scoped>
  .page-nft{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 0;
    }

    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .md-button.link{
        color: #5d62a7;
      }
    }

    .box{
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background-image: linear-gradient(to left, #1f235e, #1d0f5e);
      overflow: hidden;
      position: relative;

      span{
        color: #5d62a7;
        font-size: 14px;
        line-height: 30px;
        text-align: center; 
        display:block;
      }

      .name{
        color: #fff;
        font-size: 18px;
        line-height: 25px;
        overflow: hidden;
      }
      
      .area{
        color: #5d62a7;
        font-size: 12px;
        padding-top: 5px;
        div{
          display: inline;
          margin-right: 5px;
        }
      }

      .num{
        background: rgba(0, 0, 0, 0.15);
        font-size: 18px;
        color: #1cd4b6;
        border-radius: 0 0 0 50px;
        padding: 5px 10px 5px 13px;
        position: absolute;
        right: 0;
        top: 0;
      }

      .token{
        color: rgba(255, 255, 255, .6);
        font-size: 12px;
        line-height: 20px;
        margin-top: 10px;
        padding: 0 7px;
        background: rgba(255, 255, 255, .1);
        border-radius: 30px;
        overflow: hidden;
      }
    }
  }
</style>